import QRCode from './lib/QRcode'

let id = 0

export default {
  render(h) {
    return <div id={ this.id } style="display:inline-block;"></div>
  },
  name: 'qrcode',
  props: {
    text: {
      type: String
    },
    width: {
      type: Number,
      default: 128
    },

    height: {
      type: Number,
      default: 128
    },
    colorDark: {
      type: String,
      default: '#000000'
    },
    colorLight: {
      type: String,
      default: '#ffffff'
    }
  },
  data() {
    return {
      id: `pillar-qrcode-${id++}`
    }
  },
  beforeDestroy() {
    this.qrcode && this.qrcode.clear()
  },
  mounted() {
    this.$watch('text', v => {
      if (v) {
        let config = {
          text: v,
          width: this.width,
          height: this.height,
          colorDark: this.colorDark,
          colorLight: this.colorLight
        }
        if (!this.qrcode) {
          this.qrcode = new QRCode(document.querySelector(`#${this.id}`), config)
        } else {
          this.qrcode.clear() // clear the code.
          this.qrcode.makeCode(config)
        }

      }
    }, { immediate: true })
  }
}
